  /* Haruyuki custom */

  /* color/background */
  $lightGray: #f4f4f5;
  $primaryBlue: #409eff;
  $hazeBlue: #e0eafc;
  $silverGray: #8e9eab;
  
  .haruyuki-color-hazeblue {
    color: $hazeBlue;
  }
  
  .haruyuki-color-primaryblue {
    color: $primaryBlue;
  }

  .haruyuki-color-silverGray {
    color: $silverGray;
  }

  .haruyuki-bg-color-white {
    background-color: #FFFFFF;
  }

  /* width/height */
  .haruyuki-width-100 {
    width: 100%;
  }

  .haruyuki-scrollbar-60vh {
    max-height: 60vh;
    overflow-y: auto;
  }

  .haruyuki-scrollbar-70vh {
    max-height: 70vh;
    overflow-y: auto;
  }

  /* flex */
  .haruyuki-flex {
    display: flex;
  }

  .haruyuki-flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .haruyuki-flex-space-between {
    display: flex;
    justify-content: space-between;
  }

  .haruyuki-flex-space-around {
    display: flex;
    justify-content: space-around;
  }

  .haruyuki-align-items-center {
    align-items: center;
  }

  .haruyuki-flex-x-end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .haruyuki-direction-column {
    flex-direction: column;
  }

  .haruyuki-flex1 {
    flex: 1;
  }

  /* font-size */
  .haruyuki-size-18 {
    font-size: 18px;
  }

  .haruyuki-size-16 {
    font-size: 16px;
  }

  .haruyuki-size-14 {
    font-size: 14px;
  }

  /* margin/padding */
  .haruyuki-mt-20 {
    margin-top: 20px;
  }

  .haruyuki-mt-40 {
    margin-top: 40px;
  }

  .haruyuki-mb-20 {
    margin-bottom: 20px;
  }

  .haruyuki-mb-40 {
    margin-bottom: 40px;
  }

  .haruyuki-mtb-10 {
    margin: 10px 0;
  }

  .haruyuki-ml-6 {
    margin-left: 6px;
  }

  .haruyuki-mr-10 {
    margin-right: 10px;
  }

  .haruyuki-mr-20 {
    margin-right: 20px;
  }

  .haruyuki-p-10 {
    padding: 10px;
  }

  .haruyuki-plr-20 {
    padding: 0 20px;
  }
  .haruyuki-plr-40 {
    padding: 0 40px;
  }
  .haruyuki-plr-60 {
    padding: 0 60px;
  }
  .haruyuki-plr-80 {
    padding: 0 80px;
  }

  /* Haruyuki Page Header */
  .haruyuki-page-header-left {
    display: -webkit-box;
    cursor: pointer;
    margin-right: 40px;
    position: relative;
  }

  .haruyuki-page-header-left::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 16px;
    right: -20px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: #DCDFE6;
  }

  /* Haruyuki row height line */
  .haruyuki-line-height-special {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid $hazeBlue;
    transition: all 1s ease 0s;
    user-select: none;
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    &:hover {
      background-color: $hazeBlue;
    }
  }

  /* Haruyuki Details */
  .haruyuki-title {
    font-weight: bold;
    height: 40px;
    line-height: 40px;
    // color: #a1c4fd;
  }

  .haruyuki-content {
    background: $lightGray;
    border-radius: 10px;
    padding: 20px 30px 12px 30px;
    margin-bottom: 20px;
  }

  /* Haruyuki image-preview */
  .haruyuki-image-preview {
    border-radius: 10px;
    // padding: 14px;
    height: auto;
    background: #F2F2F2;

    .haruyuki-image {
      border-radius: 10px;
      width: 100%;
      height: 140px;
      background: #FFFFFF;
      position: relative;
      .el-image {
        border-radius: 10px 10px 0 0;
      }

      .haruyuki-text {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 30px;
        line-height: 30px;
        text-align: center;
        width: 100%;
        // background-color: #979797;
        color: #ffffff;
        border-radius: 0 0 10px 10px;
        background-color: rgba(185, 185, 185, 0.8);
      }
    }
  }


  /* Haruyuki rests */
  .cursor-pointer {
    cursor: pointer;
  }

  .cursor-pointer:hover {
    color: rgba(64, 158, 255, 0.8);
  }

  haruyuki-z-index2048 {
    z-index: 2048;
  }